<!--
 * @Author: gao_m3
 * @Date: 2020-12-01 09:17:31
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-01-06 09:01:19
 * @Descripttion: 
-->
<template>
  <fks-dialog
    :visible.sync="show"
    width="980px"
    :before-close="handleClose"
  >
    <div slot="title">
      <i
        v-if="serverState"
        class="fks-icon-plus"
        :style="{ color: theme }"
      />
      <i
        v-if="!serverState"
        class="fks-icon-edit"
        :style="{ color: theme }"
      />
      {{ serverState ? LANG.ADD : LANG.EDIT }}
    </div>
    <fks-form
      ref="serverConfig"
      :model="serverConfig"
      :rules="serverState ? addConfigRules : editConfigRules"
    >
      <template v-if="serverType == 'SMS'">
        <fks-form-item
          :label="LANG.SERVERE_NAME"
          prop="serverName"
          lead
          :span="12"
        >
          <fks-input
            v-model="serverConfig.serverName"
            maxlength="50"
            :placeholder="LANG.PLACEHOLDER_SERVERNAME"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.TYPE"
          prop="type"
          :span="12"
        >
          <fks-select
            v-model="serverConfig.type"
            style="width: 100%"
            @change="selectSmsType"
          >
            <fks-option
              v-for="item in smsTypes"
              :key="item"
              :label="item"
              :value="item"
            />
          </fks-select>
        </fks-form-item>
        <fks-form-item
          :label="LANG.ADDRESS"
          prop="host"
          :span="12"
          lead
        >
          <fks-input
            v-model="serverConfig.host"
            :disabled="isDisabled"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PORT_NUMBER"
          prop="port"
          align="left"
        >
          <fks-input
            v-model="serverConfig.port"
            :disabled="isDisabled"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.ACCOUNT"
          prop="username"
          align="left"
        >
          <fks-input
            v-model="serverConfig.username"
            auto-complete="new-password"
            :placeholder="LANG.INPUT_SMS_USERNAME"           
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.PASSWORD"
          prop="password"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.password"
            auto-complete="new-password"
            show-password      
            :placeholder="LANG.INPUT_SMS_PASSWORD"    
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          lead
          :label="LANG.PROXY_HOST"
          prop="proxyConfig.scheme"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.hostName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_PORT"
          prop="proxyConfig.port"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.port"
            maxlength="5"
            oninput="value=value.replace(/[^\d]/g,'')"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_SCHEME"
          prop="proxyConfig.scheme"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.scheme"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.SIGN"
          prop="sign"
          align="left"
        >
          <fks-input
            v-model="serverConfig.sign"
            maxlength="50"
            :placeholder="LANG.SIGN_TIP"
          />
        </fks-form-item>
        <fks-form-item
          :span="24"
          :label="LANG.STATE"
          prop="sign"
          align="left"
          class="form-item"
        >
          <fks-switch
            v-model="serverConfig.state"
            :active-value="true"
            :inactive-value="false"
          />
          <div style="color: #ddd">
            {{ LANG.STATE_TIP }}
          </div>
        </fks-form-item>
      </template>
      <template v-if="serverType == 'Mail'">
        <fks-form-item
          :label="LANG.SERVER_NAME"
          prop="serverName"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.serverName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.ADDRESS"
          prop="host"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.host"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PORT_NUMBER"
          prop="port"
          align="left"
        >
          <fks-input
            v-model="serverConfig.port"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.EMAIL_ACCOUNT"
          prop="username"
          align="left"
        >
          <fks-input
            v-model="serverConfig.username"  
            auto-complete="new-password"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.PASSWORD"
          prop="password"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.password"  
            auto-complete="new-password"
            show-password
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_HOST"
          prop="proxyConfig.hostName"
          align="left"
        >
          <fks-input
            v-model="serverConfig.properties.mail.smtp.proxy.host"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_PORT"
          prop="proxyConfig.port"
          align="left"
        >
          <fks-input
            v-model="serverConfig.properties.mail.smtp.proxy.port"
            oninput="value=value.replace(/[^\d]/g,'')"
            maxlength="5"
          />
        </fks-form-item>
        <!-- <fks-form-item
          :label="LANG.SSL_CERTIFICATE"
          prop="state"
          :span="12"
          lead
        >
          <fks-switch
            v-model="serverConfig.properties.mail.smtp.ssl.enable"
            :active-value="true"
            :inactive-value="false"
          />
        </fks-form-item> -->
        <fks-form-item
          :label="LANG.STATE"
          prop="state"
          :span="12"
          class="form-item"
        >
          <fks-switch
            v-model="serverConfig.state"
            :active-value="true"
            :inactive-value="false"
          />
          <div style="color: #ddd">
            {{ LANG.STATE_TIP }}
          </div>
        </fks-form-item>
      </template>
      <template v-if="serverType == 'AuroraPush'">
        <fks-form-item
          :span="12"
          :label="LANG.APP_NAME"
          prop="serverName"
          align="left"
        >
          <fks-input
            v-model="serverConfig.serverName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.APP_KEY"
          prop="appKey"
          required
          align="left"
        >
          <fks-input
            v-model="serverConfig.appKey"   
            auto-complete="new-password"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.MASTER_SECRET"
          prop="appSecret"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.appSecret"
            auto-complete="new-password"
            show-password          
            maxlength="250"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_HOST"
          prop="proxyConfig.hostName"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.hostName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_PORT"
          prop="proxyConfig.port"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.port"
            maxlength="5"
            oninput="value=value.replace(/[^\d]/g,'')"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_SCHEME"
          prop="proxyConfig.scheme"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.scheme"
            maxlength="50"
          />
        </fks-form-item><fks-form-item
          :label="LANG.STATE"
          prop="state"
          :span="12"
        >
          <fks-switch
            v-model="serverConfig.state"
            :active-value="true"
            :inactive-value="false"
          />
          <div style="color: #ddd">
            {{ LANG.STATE_TIP }}
          </div>
        </fks-form-item>
      </template>
      <template v-if="serverType == 'WeCom'">
        <fks-form-item
          required
          :label="LANG.ENTERPRISE_ID"
          prop="corpId"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.corpId"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.CLIENT_NAME"
          prop="serverName"
          align="left"
        >
          <fks-input
            v-model="serverConfig.serverName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.ADDRESS"
          prop="host"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.host"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.AGENT_ID"
          required
          prop="agentId"
          align="left"
        >
          <fks-input
            v-model="serverConfig.agentId"
            auto-complete="new-password"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.SECRET"
          prop="appSecret"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.appSecret"
            auto-complete="new-password"
            show-password
            maxlength="250"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_HOST"
          prop="proxyConfig.hostName"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.hostName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_PORT"
          prop="proxyConfig.port"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.port"
            maxlength="5"
            oninput="value=value.replace(/[^\d]/g,'')"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_SCHEME"
          prop="proxyConfig.scheme"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.scheme"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.STATE"
          prop="state"
          :span="12"
        >
          <fks-switch
            v-model="serverConfig.state"
            :active-value="true"
            :inactive-value="false"
          />
          <div style="color: #ddd">
            {{ LANG.STATE_TIP }}
          </div>
        </fks-form-item>
      </template>
      <template v-if="serverType == 'DingTalk'">
        <fks-form-item
          :label="LANG.CLIENT_NAME"
          prop="serverName"
          :span="12"
          lead
        >
          <fks-input
            v-model="serverConfig.serverName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          required
          :label="LANG.AGENT_ID"
          prop="agentId"
          align="left"
        >
          <fks-input
            v-model="serverConfig.agentId"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          lead
          required
          :label="LANG.APP_KEY"
          prop="appKey"
          align="left"
        >
          <fks-input
            v-model="serverConfig.appKey"
            auto-complete="new-password"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.APP_SECRET"
          prop="appSecret"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.appSecret"
            auto-complete="new-password"
            show-password
            maxlength="250"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          lead
          :label="LANG.PROXY_HOST"
          prop="proxyConfig.hostName"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.hostName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_PORT"
          prop="proxyConfig.port"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.port"
            maxlength="5"
            oninput="value=value.replace(/[^\d]/g,'')"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_SCHEME"
          prop="proxyConfig.scheme"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.scheme"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.STATE"
          prop="state"
          :span="12"
        >
          <fks-switch
            v-model="serverConfig.state"
            :active-value="true"
            :inactive-value="false"
          />
          <div style="color: #ddd">
            {{ LANG.STATE_TIP }}
          </div>
        </fks-form-item>
      </template>
      <template v-if="serverType == 'FeiShu'">
        <fks-form-item
          :label="LANG.CLIENT_NAME"
          prop="serverName"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.serverName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.APP_ID"
          required
          prop="appId"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.appId"
            auto-complete="new-password"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.APP_SECRET"
          prop="appSecret"
          :span="12"
        >
          <fks-input
            v-model="serverConfig.appSecret"
            auto-complete="new-password"
            show-password
            maxlength="250"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_HOST"
          prop="proxyConfig.hostName"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.hostName"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_PORT"
          prop="proxyConfig.port"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.port"
            maxlength="5"
            oninput="value=value.replace(/[^\d]/g,'')"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PROXY_SCHEME"
          prop="proxyConfig.scheme"
          align="left"
        >
          <fks-input
            v-model="serverConfig.proxyConfig.scheme"
            maxlength="50"
          />
        </fks-form-item><fks-form-item
          :label="LANG.STATE"
          prop="state"
          :span="12"
        >
          <fks-switch
            v-model="serverConfig.state"
            :active-value="true"
            :inactive-value="false"
          />
          <div style="color: #ddd">
            {{ LANG.STATE_TIP }}
          </div>
        </fks-form-item>
      </template>
    </fks-form>
    <div slot="footer">
      <fks-button
        style="margin-top: 8px"
        type="primary"
        icon="fks-icon-check"
        @click="dialogSubmit()"
      >
        {{ LANG.SAVE }}
      </fks-button>
    </div>
  </fks-dialog>
</template>

<script>
import * as types from '@/store/Getter/getterTypes.js'
export default {
  name: 'ServerConfig',
  props: {
    showDialog: { type: Boolean },
    config: {},
    serverState: { type: Boolean }, //0-编辑 1-新增
    serverType: ''
  },
  data() {
    return {
      smsTypes: ['mq', 'qcloud', 'acs'],
      isDisabled: false,
      show: this.showDialog,
      serverConfig: {
        proxyConfig: {
          hostName: null,
          port: null,
          scheme: null
        }
      }
    }
  },
  computed: {
    theme() {
      return this.$store.getters[types.THEME]
    },
    //form校验规则 编辑时
    editConfigRules() {
      const editConfigRules = {
        serverName: [{ required: true, message: this.LANG.MSG_SERVERNAME }],
        type: [{ required: true, message: this.LANG.MSG_TYPE }],
        host: [
          {
            required: true,
            message: this.LANG.MSG_HOST
          }
        ],
        port: [{ required: true, validator: this.isPort }],
        username: [{ required: true, message: this.LANG.MSG_USERNAME }],
        'proxyConfig.hostName': [
          {
            required:
              this.serverConfig.proxyConfig.scheme ||
              this.serverConfig.proxyConfig.port
                ? true
                : false,
            message: this.LANG.MSG_HOSTNAME,
            trigger: 'blur'
          }
        ],
        'proxyConfig.port': [
          {
            required:
              this.serverConfig.proxyConfig.scheme ||
              this.serverConfig.proxyConfig.hostName
                ? true
                : false,
            message: this.LANG.MSG_PROXY_PORT,
            trigger: 'blur'
          }
        ],
        'proxyConfig.scheme': [
          {
            required:
              this.serverConfig.proxyConfig.hostName ||
              this.serverConfig.proxyConfig.port
                ? true
                : false,
            message: this.LANG.MSG_SCHEME,
            trigger: 'blur'
          }
        ]
      }
      return editConfigRules
    },
    //form校验规则 新增
    addConfigRules() {
      const serverConfigRules = {
        serverName: [{ required: true, message: this.LANG.MSG_SERVERNAME }],
        type: [{ required: true, message: this.LANG.MSG_TYPE }],
        host: [
          {
            required: true,
            message: this.LANG.MSG_HOST
          }
        ],
        port: [{ required: true, validator: this.isPort }],
        username: [{ required: true, message: this.LANG.MSG_USERNAME }],
        password: [{ required: true, message: this.LANG.MSG_PASSWORD }],
        appSecret: [{ required: true, message: this.LANG.MSG_PASSWORD }],
        'proxyConfig.hostName': [
          {
            required:
              this.serverConfig.proxyConfig.scheme ||
              this.serverConfig.proxyConfig.port
                ? true
                : false,
            message: this.LANG.MSG_HOSTNAME,
            trigger: 'blur'
          }
        ],
        'proxyConfig.port': [
          {
            required:
              this.serverConfig.proxyConfig.scheme ||
              this.serverConfig.proxyConfig.hostName
                ? true
                : false,
            message: this.LANG.MSG_PROXY_PORT,
            trigger: 'blur'
          }
        ],
        'proxyConfig.scheme': [
          {
            required:
              this.serverConfig.proxyConfig.hostName ||
              this.serverConfig.proxyConfig.port
                ? true
                : false,
            message: this.LANG.MSG_SCHEME,
            trigger: 'blur'
          }
        ]
      }
      return serverConfigRules
    }
  },
  watch: {
    showDialog: {
      deep: true,
      immediate: true,
      handler(val) {
        this.show = val
        if (val) {
          this.initData()
          if (!this.serverState) {
            for (var item in this.config) {
              this.serverConfig[item] = this.config[item]
            }
            if (
              this.serverConfig.type == 'qcloud' ||
              this.serverConfig.type == 'acs'
            ) {
              this.isDisabled = true
            }
          }
        }
      }
    }
  },
  mounted() {
  },

  methods: {
    /**
     * @description: 验证端口是否在[0,65535]之间
     */
    isPort(rule, value, callback) {
      if (!value && value !== 0) {
        return callback(new Error(this.LANG.MSG_PORT_TIP))
      }
      setTimeout(() => {
        const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
        const rsCheck = re.test(value)
        if (!rsCheck) {
          callback(new Error(this.LANG.PORT_NUMBER_TIP))
        } else {
          callback()
        }
      }, 100)
    },
    proxyPort(...args) {
      if (
        this.serverConfig.proxyConfig.scheme ||
        this.serverConfig.proxyConfig.hostName
      ) {
        return this.isPort(...args)
      } else {
        args[2]()
      }
    },
    initData() {
      if (this.$refs['serverConfig']) {
        this.$refs['serverConfig'].clearValidate()
      }
      this.isDisabled = false
      switch (this.serverType) {
        case 'SMS': {
          this.serverConfig = {
            host: '',
            password: '',
            port: '',
            username: '',
            serverName: '',
            sign: '',
            type: '',
            proxyConfig: {
              hostName: null,
              port: null,
              scheme: null
            },
            state: true
          }
          break
        }
        case 'Mail': {
          this.serverConfig = {
            host: '',
            password: '',
            port: '',
            username: '',
            state: true,
            serverName:'',
            properties: {
              mail: {
                smtp: {
                  proxy: { host: '', port: '' }
                  // ssl: { enable: false }
                }
              }
            },
            proxyConfig: {
              hostName: null,
              port: null,
              scheme: null
            }
          }
          break
        }
        case 'AuroraPush': {
          this.serverConfig = {
            appKey: '',
            appSecret: '',
            serverName: '',
            state: true,
            proxyConfig: {
              hostName: null,
              port: null,
              scheme: null
            }
          }
          break
        }
        case 'WeCom': {
          this.serverConfig = {
            host: '',
            corpId: '',
            appSecret: '',
            serverName: '',
            agentId: '',
            state: true,
            proxyConfig: {
              hostName: null,
              port: null,
              scheme: null
            }
          }
          break
        }
        case 'DingTalk': {
          this.serverConfig = {
            agentId: '',
            appSecret: '',
            serverName: '',
            appKey: '',
            state: true,
            proxyConfig: {
              hostName: null,
              port: null,
              scheme: null
            }
          }
          break
        }
        case 'FeiShu': {
          this.serverConfig = {
            appId: '',
            appSecret: '',
            serverName: '',
            state: true,
            proxyConfig: {
              hostName: null,
              port: null,
              scheme: null
            }
          }
          break
        }
      }
      if (this.serverState == 0) {
        this.serverConfig.id = ''
      }
    },
    //选择短信服务器类型
    selectSmsType(val) {
      if (val == 'mq') {
        this.isDisabled = false
        this.$set(this.serverConfig, 'host', '')
        this.$set(this.serverConfig, 'port', '')
      }
      if (val == 'qcloud') {
        this.isDisabled = true
        this.$set(this.serverConfig, 'host', 'yun.tim.qq.com')
        this.$set(this.serverConfig, 'port', 443)
      }
      if (val == 'acs') {
        this.isDisabled = true
        this.$set(this.serverConfig, 'host', 'dysmsapi.aliyuncs.com')
        this.$set(this.serverConfig, 'port', 443)
      }
    },

    handleClose() {
      this.$emit('submit')
    },

    dialogSubmit(formName) {
      this.$refs.serverConfig.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.serverConfig)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item {
  margin-bottom: 0 !important;
}
</style>